<template>
  <div class="dy-main LivingPaymentCheckEnt">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">生活缴费<a slot="right" @click="gotoHistory">历史明细</a></x-header>
    </div>
    <div class="dy-body">
      <group gutter="0">
        <cell title="上海城投水务（集团）有限公司" is-link></cell>
      </group>
      <group>
        <cell title="输入条形码"></cell>
        <x-input title="" placeholder="请输入条形码(1为正确信息)" v-model="lineCode"></x-input>
      </group>
      <!-- <x-button type="default" class="sure" @click.native="toNext">查询账单</x-button> -->
      <div class="sure">
        <x-button @click.native="toNext" type="primary">查询账单</x-button>
      </div>
      <x-dialog v-model="flag" :dialog-style="{'max-width': '6.3rem', height: '4.5rem'}">
            <div class="flag">
              <h2>确认提示</h2>
              <p><img src="../../assets/img/Living/attention.png" alt="" class="attention">账单信息不存在</p>
              <div><button  class="flagBtn" :class="{selected:isOk == 0}" @click="turnOk">确定</button></div>
            </div>
        </x-dialog>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      lineCode: '', // 条形码输入
      flag: false,
      isOk: 0
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    toNext: function (e) {
      if (this.lineCode === '1') {
        this.$router.push({name: 'LivingPaymentCheckSure'})
      } else {
        this.flag = true
      }
    },
    gotoHistory: function () {
      this.$router.push({name: 'LivingPaymentHistory'})
    },
    turnOk: function () { // 弹层取消按钮点击事件
      let n = this.isOk
      n === 1 ? this.isOk = 0 : this.isOk = 1
      this.flag = 0
    }
  }
}
</script>
<style lang="less">
.LivingPaymentCheckEnt{
  .sure{
    line-height:0.88rem;
    width:6.9rem;
    margin-left: 0.3rem;
    margin-top: 0.49rem;
    font-size: 0.3rem;
    color: white;
    box-sizing: border-box;
    &.forbiden{
      opacity: .5;
    }
  }
  .flag{
    width: 100%;
    height: 100%;
    &>h2{
      line-height: 0.86rem;
      font-size: .28rem;
      font-weight:normal;
      border-bottom: 1px solid #EAEAEA;
      box-sizing: border-box;
    }
    p{
        font-size: .26rem;
        padding: .77rem 0 .86rem;
        text-align: center;
    }
    .flagBtn{
        display: inline-block;
        width: 3.4rem;
        line-height: 0.7rem;
        margin:0px 0.35rem;
        font-size: .28rem;
        color: #EC1B30;
        border-color: #EC1B30;
        background-color: transparent;
        border-radius:.04rem;
        box-sizing: border-box;
        &.selected{
            background: #EC1B30;
            color: white;
        }
    }
}
.attention{
  width:1.11rem;
  height: .78rem;
  vertical-align: middle;
  padding-right: .43rem;
  box-sizing: border-box;
}
}
</style>
